<template>
	<view class="control">
		<!-- 头部 -->
		<view class="header">
			<image mode="widthFix"
				src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/b00e2d4ab153255cf8412090103afadb36e7cb1d.png">
			</image>
			<view class="info-box">
				<nav-bar :title="name"></nav-bar>
				<view class="info">
					<view>
						<view class="flex-space-between">
							<view class="title">{{name}}|{{train_content}}</view>
							<!-- <view class="state">{{state ==0 ? '待开课' :'已上课'}}</view> -->
						</view>
						<view class="flex-align tag-list">
							<view class="tag">{{train_content}}</view>
							<view class="tag">时长{{time_long}}分钟</view>
						</view>
					</view>
					<view class="flex-align" style="margin-top: 20rpx;">
						<view class="info-item">
							<van-icon name="location" size="20rpx" />
							<text>{{hour_time}}</text>
						</view>
						<view class="info-item">
							<van-icon name="clock" size="20rpx" />
							<text>共选择{{selectListlength}}名学生</text>
						</view>
					</view>
					<!-- <view class="flex-align" style="margin-top: 20rpx;">
						<view class="info-item">
							<van-icon name="location" size="20rpx" />
							<text>大连体育馆第一用词</text>
						</view>
						<view class="info-item">
							<van-icon name="clock" size="20rpx" />
							<text>{{hour_time}}</text>
						</view>
					</view> -->
				</view>

			</view>
		</view>
		<view class="notify flex-space-between">
			<view class="flex-align">
				<view class="img" v-for="item in 3" :key="item">
					<van-image fit="cover" round width="40rpx" height="40rpx"
						src="https://img.yzcdn.cn/vant/cat.jpeg" />
				</view>
			</view>
			<view class="info">共3名学生参与预约</view>
		</view>

		<view class="title-box flex-space-between">
			<view class="title">预约教练空闲时间</view>
			<view @click="href">编辑</view>
		</view>
		<view class="week-list flex-align">
			<view class="mouth">
				<view>{{nowMouth}}</view>
				<view>月</view>
			</view>
			<view class="week-item" :class="{'active':item.day == selectDay}" v-for="item in weekList" :key="item"
				@click="selectWeek(item)">
				<view>
					{{item.weeks}}
				</view>
				<view>{{item.mouth}}/{{item.day}}</view>
			</view>
		</view>

		<!-- <view class="scroll">
			<view class="time-list">
				<view 
					class="time-item" 
					:class="{'disabled':item > 6,'active':item === selectTime}" 
					v-for="item in 9" 
					:key="item"
					@click="handSelectTime(item)">
					<view class="top">
						<view>09:00</view>
						<view>~</view>
						<view>10:00</view>
					</view>
					<view class="bottom">0/3人</view>
				</view>
			</view>
			
			<view class="note">
				<textarea placeholder="预约备注" v-model="note"></textarea>
			</view>
		</view> -->
		<view class="scroll" style="overflow: unset;">
			<view class="time-list">
				<view class="" v-for="(item,index) in list" :key="item">
					<!-- :style="{backgroundImage:'url('+images+')'}" 背景图-->
					<view class="time-item" @click="handSelectTime(item,index)" v-if="item.status == 1"
						:style="{ backgroundImage: 'url('+item.backgroundImage+')',backgroundColor:item.background }"
						:class=" year_month_daylsit < item.course_date || (year_month_daylsit==item.course_date && item.end_time > time_list) && item.check== true && item.status == 1 ? index === selectTime ?'select-ash':'active' : 'disabled'">
						<view class="scc" v-if="!item.backgroundImage && item.check == true">
							<view class="top">
								<view>{{item.start_time}}</view>
								<view>~</view>
								<view>{{item.end_time}}</view>
							</view>
						</view>
						<view class="scc" v-else>
							<view class="top">
								<view></view>
								<view></view>
								<view></view>
							</view>
						</view>
					</view>
					<view class="time-item" @click="handSelectlist(item,index)" v-else
						:style="{ backgroundImage: 'url('+item.backgroundImage+')',backgroundColor:item.background }"
						:class=" year_month_daylsit < item.course_date || (year_month_daylsit==item.course_date && item.end_time > time_list) && item.check== true && item.status == 1 ? index === selectTime ?'select-ash':'active' : 'disabled'">
						<view class="scc" v-if="!item.backgroundImage && item.check == true">
							<view class="top">
								<view>{{item.start_time}}</view>
								<view>~</view>
								<view>{{item.end_time}}</view>
							</view>
						</view>
						<view class="scc" v-else>
							<view class="top">
								<view></view>
								<view></view>
								<view></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="note">
				<textarea placeholder="预约备注" v-model="note"></textarea>
			</view>
		</view>


		<view class="footer">
			<view class="btn" @click="submit">确认预约</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nowMouth: 1, //现在月份
				weekList: [],
				selectDay: '', //存储的日
				selectTime: '', //选择时间
				note: '', //备注
				images: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/4265ed81971303fe0bf340c7d26b82672aa2e668.png',
				selectList: [],
				id: "",
				hour_time: "",
				name: "",
				time_long: "",
				train_content: "",
				selectListlength: ''
			}
		},
		onLoad(options) {
			const selectList = JSON.parse(decodeURIComponent(options.applicantlist))
			this.selectList = selectList
			console.log(this.selectList.length, '456')
			this.selectListlength = this.selectList.length
			this.state = options.state
			this.id = options.id
			this.train_content = options.train_content
			this.time_long = options.time_long
			this.name = options.name
			this.hour_time = options.hour_time
			this.createWeekList()
		},
		methods: {
			createWeekList() {
				let nowDate = new Date()
				this.nowMouth = nowDate.getMonth() + 1
				let day = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
				let weekList = [{
					mouth: this.nowMouth.toString().padStart(2, '0'),
					day: nowDate.getDate().toString().padStart(2, '0'),
					weeks: '今天'
				}]
				for (let i = 1; i < 7; i++) {
					let nextData = nowDate.setDate(nowDate.getDate() + i)
					let Date2 = new Date(nextData)
					weekList.push({
						mouth: (Date2.getMonth() + 1).toString().padStart(2, '0'),
						day: Date2.getDate().toString().padStart(2, '0'),
						weeks: day[Date2.getDay()]
					})
				}
				this.weekList = weekList
				this.selectDay = weekList[0].day
			},
			href() {
				uni.navigateTo({
					url: "/page_admin/coach-side/class-home/class-sub/class-add"
				})
			},
			selectWeek(item) {
				this.selectDay = item.day
			},
			handSelectTime(item, index) {
				let _this = this
				if (this.today == this.date_d) {
					if (this.year_month_daylsit >= item.course_date && item.end_time <= this.time_list) {
						uni.showToast({
							title: '已经过了时间段',
							icon: 'none', //如果要纯文本，不要icon，将值设为'none'
							duration: 2000 //持续时间为 2秒
						})
						return
					}
				}
				// 选中
				if (item.check) {
					// 取消
					if (this.list[index].backgroundImage) {
						this.selectTime = ''
						this.course_hour_id = ''
						_this.$set(item, 'backgroundImage', '')
					} else {
						// 选中
						if (!this.index) {
							this.index = 0;
						}
						this.selectTime = index
						_this.$set(this.list[this.index], 'backgroundImage', '')
						_this.$set(item, 'backgroundImage', this.images)
						this.course_hour_id = item.id
					}

					this.index = index
				}
			},
			submit() {
				uni.navigateTo({
					url: '/page_admin/coach-side/class-home/class-deail/class-deail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.control {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding-bottom: 160rpx;

		.header {
			position: relative;

			image {
				width: 100%;
				display: block;
			}

			.info-box {
				position: absolute;
				left: 0;
				height: 100%;
				width: 100%;
				top: 0;
				display: flex;
				flex-direction: column;

				.info {
					padding: 30rpx 30rpx;
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: space-between;

					.title {
						color: rgb(51, 51, 51);
						font-size: 30rpx;
						font-weight: 700;
					}

					.state {
						color: rgb(51, 51, 51);
						font-size: 28rpx;
						font-weight: 500;
					}

					.tag-list {
						margin-top: 21rpx;

						.tag {
							padding: 5rpx 20rpx 5rpx;
							font-size: 24rpx;
							font-weight: 500;
							background-color: rgb(255, 255, 255);
							border-radius: 40.5rpx;
							color: rgb(41, 166, 241);
							margin-right: 20rpx;

							&:nth-of-type(2) {
								color: rgb(255, 143, 5);
							}
						}
					}

					.info-item {
						margin-right: 50rpx;
						color: rgb(51, 51, 51);
						font-size: 20rpx;
						font-weight: 500;

						&:last-of-type {
							margin-left: 0;
						}

						text {
							margin-left: 4rpx;
						}
					}
				}
			}
		}

		.notify {
			padding: 27rpx 19rpx 26rpx 30rpx;
			color: rgb(40, 40, 40);
			font-size: 24rpx;
			font-weight: 500;
			background-color: rgb(243, 243, 243);

			@for $i from 1 through 10 {
				.img:nth-of-type(#{$i+1}) {
					transform: translateX(-10rpx * $i);
				}
			}

		}

		.title-box {
			margin: 40rpx 30rpx;
			color: rgb(47, 117, 250);
			font-size: 28rpx;
			font-weight: 500;
			border-left: 6rpx solid rgb(0, 108, 255);


			.title {
				color: rgb(51, 51, 51);
				font-size: 30rpx;
				padding-left: 20rpx;
				font-weight: 700;
			}
		}

		.week-list {
			padding: 8rpx 13rpx 8rpx 0rpx;
			background-color: rgb(247, 247, 247);

			.mouth {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: rgb(48, 48, 48);
				font-size: 24rpx;
				font-weight: 700;
				padding: 0 22rpx;
			}

			.week-item {
				color: rgb(51, 51, 51);
				font-size: 24rpx;
				font-weight: 700;
				padding: 15rpx 0 19rpx;
				flex: 1;
				border-radius: 10rpx;
				display: flex;
				letter-spacing: -0.48rpx;
				flex-direction: column;
				align-items: center;

				view:last-of-type {
					font-size: 20rpx;
					margin-top: 5rpx;
					letter-spacing: -0.36rpx;
				}
			}

			.active {
				background-color: rgb(207, 218, 221);
			}
		}

		.scroll {
			flex: 1;
			height: 0;
			overflow: auto;
		}

		.time-list {
			display: grid;
			padding: 29rpx 30rpx 31rpx;
			grid-template-columns: 1fr 1fr 1fr;
			grid-row-gap: 22rpx;
			grid-column-gap: 22rpx;

			.time-item {
				box-shadow: 0px 3rpx 9.2rpx 0.8rpx rgba(0, 0, 0, 0.04);
				border-radius: 20rpx;
				overflow: hidden;
				background-color: rgba(47, 117, 250, 0.1);
				border: 3rpx solid transparent;

				.top {
					padding: 25rpx 0;
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 700;
					text-align: center;
					line-height: 24rpx;
				}

				.bottom {
					color: rgb(51, 51, 51);
					font-size: 22rpx;
					font-weight: 500;
					text-align: center;
					padding: 6rpx 0 7rpx;
					background-color: rgba(47, 117, 250, 0.1);
				}
			}

			.disabled {
				background-color: rgb(243, 243, 243);

				.top {
					color: rgb(153, 153, 153);
				}

				.bottom {
					color: rgb(153, 153, 153);
					background-color: rgba(50, 50, 50, 0.1);
				}
			}

			.active {
				background-color: rgba(47, 117, 250, 0.1);
				border-color: rgb(47, 117, 250);

				.top {
					color: rgb(47, 117, 250);
				}

				.bottom {
					color: rgb(47, 117, 250);
				}
			}
		}

		.note {
			padding: 0px 30rpx;

			/deep/ .textarea-placeholder {
				font-size: 28rpx;
				color: rgb(153, 153, 153);
				font-weight: 400;
			}

			textarea {
				width: 100%;
				background-color: #f3f3f3;
				border-radius: 10rpx;
				box-sizing: border-box;
				padding: 20rpx;
				font-size: 28rpx;
				font-weight: 500;
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			box-shadow: 0px -8rpx 51rpx rgba(0, 0, 0, 0.04);

			.btn {
				color: rgb(255, 255, 255);
				background-image: linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%);
				border-radius: 60rpx;
				padding: 26rpx 0;
				font-size: 30rpx;
				text-align: center;
				font-weight: 700;
			}

		}
	}
</style>